<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>工作台管理系统</title>
    <link rel="stylesheet" href="static/css/all.min.css">
    <link rel="stylesheet" href="static/css/messagebox.css">
    <link rel="stylesheet" href="static/css/fileWindowBox.css">
    <link rel="stylesheet" href="static/css/version.css">
    <link rel="stylesheet" href="static/css/userConf.css">
</head>

<body>
    <!-- 左侧导航栏 -->
    <nav class="nav-container">
        <div class="nav-title">工作台管理系统</div>
        <div class="nav-buttons">
            <a href="#home" class="nav-button">首页</a>
            <a href="#packages" class="nav-button">安装包</a>
            <a href="#versions" class="nav-button active">工作台软件配置</a>
            <a href="#others" class="nav-button">其他</a>
        </div>
    </nav>

    <!-- 页面容器 -->
    <div class="content-container">        
        <!-- 各页面内容 -->
        <div id="home-page" class="page-container">
            <div class="container">
                <h1 class="header">欢迎使用版本管理系统</h1>
                <div class="placeholder">
                    <p>系统功能正在不断完善中...</p>
                    <p>当前版本：v2.1.0</p>
                </div>
            </div>
        </div>

        <div id="packages-page" class="page-container">
            <div class="container">
                <h1 class="header">安装包管理</h1>
                <div class="placeholder">
                    <p>安装包功能开发中，敬请期待</p>
                    <p>预计上线时间：2024年3月</p>
                </div>
            </div>
        </div>

        <div id="versions-page" class="page-container active">
            <div class="container">
                <h1 class="header">工作台列表</h1>
                <table class="version-table">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>编号</th>
                            <th>创建时间</th>
                            <th>创建人</th>
                        </tr>
                    </thead>
                    <tbody id="version-list"></tbody>
                </table>
                <button class="create-btn" id="create-version">＋ 创建新工作台</button>
            </div>
        </div>

        <div id="others-page" class="page-container">
            <div class="container">
                <h1 class="header">其他功能</h1>
                <div class="placeholder">
                    <p>更多功能即将上线</p>
                    <p>正在开发的功能：日志管理、权限控制</p>
                </div>
            </div>
        </div>

    </div>


    <!-- 新增用户信息区域 -->
    <div class="user-info" onmouseover="showDropdown()" onmouseout="hideDropdown()">
        <div class="user-avatar">张</div>
        <span class="user-name">张三</span>
        <!-- 添加父容器包裹下拉菜单 -->
        <div class="dropdown-wrapper">
            <div class="user-dropdown" id="userDropdown">
                <div class="dropdown-item">编辑个人信息</div>
                <div class="dropdown-item">账户设置</div>
                <div class="dropdown-item" onclick="permissionEdit()">权限设置</div>
                <div class="dropdown-item" onclick="logout()">退出登录</div>
            </div>
        </div>
    </div>
    

    <!-- 版本详情弹窗 -->
    <div class="modal-overlay" id="version-modal">
        <div class="modal-content">
            <button class="modal-close" id="modal-close">&times;</button>
            <h2 class="header">工作台详情</h2>
            <div class="version-detail" id="version-detail"></div>
            <!-- 新增配置按钮 -->
            <div class="config-actions">
                <button class="config-btn" id="config-files">配置工作台版本信息</button>
                <button class="delete-btn" id="delete-version">删除该工作台</button>
            </div>
        </div>
    </div>

    <!-- 创建工作台弹窗 -->
    <div class="modal-overlay" id="create-modal">
        <div class="modal-content">
            <button class="modal-close" id="close-create-modal">&times;</button>
            <h2 class="header">创建新的工作台</h2>
            <form id="work-tagert-form">
                <div class="form-group">
                    <label>工作台名称：</label>
                    <input type="text" id="input-name" required>
                </div>
                <div class="form-group">
                    <label>说明：</label>
                    <textarea id="input-remark" rows="4"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="cancel-btn">取消</button>
                    <button type="submit" class="confirm-btn">确认</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 文件管理弹窗 -->
    <div id="file-manager-modal" class="model-file-content">
        <div class="modal-container">
            <div class="modal-header">
                <h2 class="modal-title" id="workbenchTitle">文件列表</h2>
                <span class="close-btn" onclick="closeFileManager()">&times;</span>
            </div>

            <table class="version_file_table">
                <colgroup class='version_file_group'>
                    <col class="checkbox-column">
                    <col class="filename-column">
                    <col class="action-column-del">
                    <col class="action-column-rename">
                </colgroup>
                <thead class="table-header">
                    <tr id='version_file_group_head'>
                        <th class="checkbox-column">
                            <input type="checkbox" class="bulk-select" id="selectAll">
                        </th>
                        <th class="filename-column">文件名</th>
                        <th class="action-column-del">删除</th>
                        <th class="action-column-rename">重命名</th>
                    </tr>
                </thead>
            </table>

            <div class="table-container">
                <table class="file-table">
                    <colgroup class='version_file_group'>
                        <col class="checkbox-column">
                        <col class="filename-column">
                        <col class="action-column-del">
                        <col class="action-column-rename">
                    </colgroup>
                    <tbody id="file-list-body">

                    </tbody>
                </table>
            </div>

            <div class="fixed-action-bar">
                <button class="btn primary" onclick="uploadFile()">上传文件</button>
                <button class="btn primary" onclick="uploadEntrieDir()">上传目录</button>
                <button class="btn success" onclick="OnDownloadByList()">下载选中</button>
                <button class="btn danger" onclick="OnDeleteFileList()">删除选中</button>
            </div>
        </div>
        <div id="upload-modal" class="modal">
            <div class="modal-tip">
                <h3>文件上传队列（<span id="active-uploads">0</span>）</h3>                
            </div>
            <div class="modle-process">
                <div id="upload-process"></div>
            </div>
            <div class="modal-content-upload">                                
                <div id="uploadResTitle">失败列表</div>
                <div id="error-list" class="list-error"></div>
                <div id="uploadfilename">正在上传:test</div>
            </div>
            <div class="modal-actions">
                <button id="cancel-all-button" onclick="OnCancelAll()" class="cancel-button">
                    ⛔ 取消所有上传
                </button>
            </div>
        </div>
    </div>


    <!-- 创建版本弹窗 -->
    <div class="modal-overlay" id="create-version-page">
        <div class="modal-content">
            <button class="modal-close" id="close-create-version" onclick="CloseCreateVersionPage()">&times;</button>
            <h2 class="header">创建新版本</h2>
            <form id="version-form">
                <div class="form-group">
                    <label>版本</label>
                    <input type="text" id="input-name-version" required>
                </div>
                <div class="form-group">
                    <label>说明：</label>
                    <textarea id="input-remark-version" rows="4"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="cancel-btn-version" onclick="CloseCreateVersionPage()">取消</button>
                    <button type="button" class="confirm-btn-version" onclick="CreateVersionBtnFunc()">确认</button>
                </div>
            </form>
        </div>
    </div>

    <script src="static/js/messagebox.js"></script>
    <script src="static/js/fileWindowBox.js"></script>
    <script src="static/js/auth.js"></script>
    <script src="static/js/version.js"></script>
    <script src="static/js/userConf.js"></script>

</body>

</html>